﻿<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>资源管理</title>
    <script src="/webjars/miniui/boot.js" type="text/javascript"></script>
    <link href="/static/css/resource.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="mini-splitter" style="width:100%;height:100%;" allowResize="false" handlerSize="8px">
    <div size="300px" showCollapseButton="true">
        <div class="mini-toolbar" style="padding:2px;border-top:0;border-left:0;border-right:0;">
            <span style="padding-left:5px;">名称/编号: </span>
            <input name="reskey" class="mini-textbox" width="150px" emptyText="请输入资源名称" onenter="search()" />
            <a class="mini-button" iconCls="fa fa-search" plain="true" onclick="search()"> 查找 </a>
        </div>
        <div class="mini-fit">

            <ul id="tree1" class="mini-tree"
                showTreeIcon="true" textField="text" idField="id" parentField="pid" resultAsTree="false"
                contextMenu="#treeMenu" showArrow="true" onnodeselect="onNodeSelect"
            >
            </ul>
        </div>
    </div>
    <div showCollapseButton="true">
        <div class="mini-toolbar" style="padding:2px;border-top:0;border-left:0;border-right:0;">
            <a class="mini-button" iconCls="fa-save" plain="true" onclick="saveData()">保存</a>
            <span class="separator"></span>
            <span style="font-size: small ;font-weight: bold;color: blue;font-family: " Helvetica Neue", Helvetica, Arial,
            sans-serif;">资源编号: </span> 【 <span id="resid" style="color: red"></span> 】
        </div>
        <div class="mini-fit">
            <!-- 资源 编辑框START-->
            <div id="editform" class="form" style="margin-left: 10px;">
                <!-- id 用于保存时判断资源是否已存在，presid用于绑定资源上下层级 -->
                <input name="id" class="mini-hidden" style="width: 100%;" readonly />
                <input name="pid" class="mini-hidden" style="width: 100%;" readonly />
                <table class="form-table" border="0" cellpadding="5" cellspacing="2"
                       style="width: 100%; table-layout: fixed;">
                    <tr>
                        <td style="width: 10%;"><font color="#dc143c">*</font>资源名称:</td>
                        <td style="width: 40%">
                            <input name="name" class="mini-textbox" style="width: 100%;" required="true" />
                        </td>
                        <td style="width: 10%;"><font color="#dc143c">*</font>资源类型:</td>
                        <td style="width: 40%">
                            <input name="type" class="mini-combobox" url="/basic/resource/type"
                                   value="100" textField="text" valueField="id" style="width: 100%;"
                                   required="true" />
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 10%;"><font color="#dc143c">*</font>对齐方式:</td>
                        <td style="width: 40%">
                            <input name="align" class="mini-combobox"
                                   data="[{ id: -1, name: '无' },{ id: 0, name: '左' }, { id: 1, name: '右'}]"
                                   textField="name" valueField="id" style="width: 100%;" value='-1' required="true" />
                        </td>
                        <td style="width: 10%;"><font color="#dc143c">*</font>资源排序:</td>
                        <td style="width: 40%">
                            <input name="sn" class="mini-textbox" style="width: 100%;" value='100' required="true" />
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 10%;">组件宽高:</td>
                        <td style="width: 40%">
                            <input name="size" class="mini-textbox" style="width: 100%;"
                                   emptyText="格式:100:*,*:200,150:200 ;  " />
                        </td>
                        <td style="width: 10%;">图标/样式:</td>
                        <td style="width: 40%">
                            <input name="icon" class="mini-textbox" style="width: 100%;" />
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 10%;">映射字段:</td>
                        <td style="width: 40%">
                            <input name="field" class="mini-textbox" style="width: 100%;" emptyText="如: grid列 、按钮ID" />
                        </td>
                        <td style="width: 10%;">流程编号:</td>
                        <td style="width: 40%">
                            <input name="flowid" class="mini-textbox" style="width: 100%;" />
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 10%;">附加信息:</td>
                        <td style="width: 40%">
                            <input name="extension" class="mini-textbox" style="width: 100%;" emptyText="如: 下拉框选项 " />
                        </td>
                        <td style="width: 10%;">提示信息:</td>
                        <td style="width: 40%">
                            <input name="prompt" class="mini-textbox" style="width: 100%;" emptyText="如 :姓名、编号" />
                        </td>
                    </tr>
                    <tr>
                        <td>资源动作:</td>
                        <td colspan="3">
                            <input name="action" class="mini-textbox" style="width: 100%;"
                                   emptyText="如: /basic/public-list/view 或 add();" />
                        </td>
                    </tr>
                    <tr>
                        <td>外部脚本:</td>
                        <td colspan="3">
                            <input name="outjs" class="mini-textbox" style="width: 100%;"
                                   emptyText="如: archive/archive-setting.js" />
                        </td>
                    </tr>
                    <tr>
                        <td>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:</td>
                        <td colspan="3">
                            <input name="remark" class="mini-textarea" style="width: 100%;" emptyText="请输入备注" />
                        </td>
                    </tr>
                </table>
            </div>
            <!-- 资源 编辑框END-->
        </div>
    </div>
</div>
<!-- 右键菜单项START -->
<ul id="treeMenu" class="mini-contextmenu" onbeforeopen="onBeforeOpen">
    <li name="add" iconCls="fa fa-plus" onclick="onAddNode">插入节点</li>
    <li name="remove" iconCls="fa fa-trash" onclick="onRemoveNode">删除节点</li>
    <li name="copyres" iconCls="fa fa-clipboard" onclick="onCopyNode">复制资源</li>
    <li name="pasteres" iconCls="fa fa-files-o" onclick="onPasteNode">粘贴资源</li>
</ul>
<!-- 右键菜单项END -->

<script type="text/javascript">

    mini.parse();
    // 加载资源树;
    search();
    var tree = mini.get("tree1");
    var form = new mini.Form("#editform");

    //保存节点
    function saveData() {
        form.validate();
        if (form.isValid() == false) {
            return;
        }
        var o = form.getData();
        var json = mini.encode(o);
        form.loading("保存中，请稍后......");
        $.ajax({
            url: "/basic/resource",
            type: "POST",
            dataType: "json",
            data: {resource: json},
            success: function (text) {
                form.unmask();
                if (text.code == 1) {
                    form.clear();
                    //search();
                    mini.showTips({
                        content: "<h2>" + text.message + "!</h2>",
                        state: "success",
                        x: "center",
                        y: "center",
                        timeout: 3000
                    });

                } else {
                    mini.alert(text.message);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                mini.alert(jqXHR.responseText);
            }
        });
    }

    //搜索树
    function search() {

        var url = "/basic/resources/-1";
        var reskey = mini.getByName("reskey").getValue();
        if (typeof reskey != "undefined" && reskey != null && reskey != "") {
            url = "/basic/resources/" + reskey;
        }
        $.ajax({
            url: url,
            type: "get",
            data: {reskey: reskey},
            dataType: "json",
            success: function (text) {
                tree.loadList(text, "id", "pid");
            },
            error: function (jqXHR, textStatus, errorThrown) {
                mini.alert("没有相应资源");
            }
        });
    }

    //选中节点
    function onNodeSelect(e) {
        var node = e.node;
        //当节点名字为空时 可以确定该资源为新建资源,这个时候可以减少一次请求
        if (!node || node.name === undefined) {
            return;
        }
        $.ajax({
            url: "/basic/resource/" + node.id,
            type: "GET",
            dataType: "json",
            success: function (text) {
                // 设置数据
                form.setData(text.data, true);
                document.getElementById("resid").innerText = node.id;
            },
            error: function (jqXHR, textStatus, errorThrown) {
                mini.alert(jqXHR.responseText);
            }
        });
    }

    //打开资源树前操作
    function onBeforeOpen(e) {
        var menu = e.sender;
        var node = tree.getSelectedNode();
        if (!node) {
            e.cancel = true;
            return;
        }
        if (node && node.text == "Base") {
            e.cancel = true;
            //阻止浏览器默认右键菜单
            e.htmlEvent.preventDefault();
            return;
        }
        var removeItem = mini.getbyName("remove", menu);
        if (node.isLeaf) {
            removeItem.enable();
        } else {
            removeItem.disable();
        }
    }

    //添加节点
    function onAddNode(e) {
        var node = tree.getSelectedNode();
        var newNode = {
            pid: node.id,
            sn: "100",
            type: 100,
            permission: "anno",
            align: -1,
        };
        tree.addNode(newNode, "add", node);
        tree.expandNode(node)
        // 设置数据
        form.setData(newNode, true);
    }

    //删除节点
    function onRemoveNode(e) {
        var node = tree.getSelectedNode();
        var childs = tree.getAllChildNodes(node);
        var ids = []
        for (i = 0, len = childs.length; i < len; i++) {
            ids.push(childs[i].id);
        }
        ids.push(node.id);
        if (node) {
            mini.confirm("确定删除选中节点？",
                "确定？",
                function (action) {
                    if (action == "ok") {
                        $.ajax({
                            url: "/basic/resource",
                            type: "POST",
                            data: {_method: "delete", ids: ids},
                            dataType: "json",
                            success: function (text) {
                                //在前端删除节点信息
                                tree.removeNode(node);
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                mini.alert(jqXHR.responseText);
                            }
                        });
                    }
                });
        }
    }

    var copyres = "";

    //添加节点
    function onCopyNode(e) {
        copyres = "";
        var node = tree.getSelectedNode()
        copyres = node.id;
        mini.showTips({
            content: "<h2>资源已复制!</h2>",
            state: "success",
            x: "center",
            y: "center",
            timeout: 3000
        });
    }

    //添加节点
    function onPasteNode(e) {
        var node = tree.getSelectedNode()
        $.ajax({
            url: "/basic/resource/copy",
            type: "POST",
            dataType: "json",
            data: {src: copyres, dest: node.id},
            success: function (text) {
                mini.showTips({
                    content: "<h2>资源克隆成功!</h2>",
                    state: "success",
                    x: "center",
                    y: "center",
                    timeout: 3000
                });
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseText);
            }
        });
    }
</script>
</body>
</html>